import React, { Component } from 'react';
import { Tools } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
const getLabel = Tools.getLabel;
@withRouter
export default class ContacterItem extends Component {
  render() {
    const {id,title,name,jobtitle,mobile,showBottom} = this.props;
    let nameAndJobtitle = name;
    if(jobtitle != ""){
        nameAndJobtitle += " | " + jobtitle;
    }
    const isEm = window.em && window.em.checkJsApi('personCardSupport');
    let mobileIcon;
    if(mobile != ""){
      if(isEm){      
        mobileIcon = <div className="crm-contacter-item-operate"><span className="crm_phone" onClick={()=>{this.emTel(mobile);}}><i className='crm-card-phone-icon icon-crm icon-crm-phone'/></span></div>;
      }else{
        mobileIcon = <a href={`tel:${mobile}`}><div className="crm-contacter-item-operate"><span className="crm_phone"><i className='crm-card-phone-icon icon-crm icon-crm-phone'/></span></div></a>;
      }
    }
    return (
    <div>
        <div className="crm-contacter-item">
            <div className="crm-contacter-item-left" onClick={()=>{
                this.props.onContacterClick && this.props.onContacterClick(id);
            }}>{title}</div>
            <div className="crm-contacter-item-right">
            <div className="crm-contacter-item-title" onClick={()=>{
                this.props.onContacterClick && this.props.onContacterClick(id);
            }}>{nameAndJobtitle}</div>
            <div className="crm-contacter-item-bottom">
                <div className="crm-contacter-item-phone">{getLabel('620','移动电话')}：{(mobile == "" ? getLabel('557','无') : mobile)}</div>
                {mobileIcon}
            </div>
            </div>
        </div>
        {
            showBottom && (<div className="crm-field-item-bottom"></div>)
        }
    </div>
    );
  }

  emTel(mobile){
    window.em.tel({'tel':mobile,'success':function (argument) {
        // console.log('success');
        // console.log(JSON.stringify(argument));
      },'fail':function (argument) {
        // console.log('fail')
        // console.log(argument);
      },'cancel':function (argument) {                        
        // console.log('cancel')
        // console.log(argument);
      },'complete':function (argument) {
        // console.log('complete')
        // console.log(argument);
    }});  
  }

  emSMS(mobile,smsContent){
    window.em.textMessage({'mobile':mobile,'text':smsContent,'success':function (argument) {
        // console.log('success');
        // console.log(JSON.stringify(argument));
      },'fail':function (argument) {
        // console.log('fail')
        // console.log(argument);
      },'cancel':function (argument) {                        
        // console.log('cancel')
        // console.log(argument);
      },'complete':function (argument) {
        // console.log('complete')
        // console.log(argument);
    }}); 
  }
  
  emMail(mailAddress){
    window.em.mailto({'mail':mailAddress,'success':function (argument) {
        // console.log('success');
        // console.log(JSON.stringify(argument));
      },'fail':function (argument) {                        
        // console.log('fail');
        // console.log(argument);
      },'cancel':function (argument) {
        // console.log('cancel');
        // console.log(argument);
      },'complete':function (argument) {
        // console.log('complete');
        // console.log(argument);
    }}); 
  }
}